<template>
  <div class="conten-box" id="countToWrapper">
    <div class="img">
      <img :src="imagePath" alt="">
    </div>
    <div class="box">
      <div class="number"> 
        <p>历史访客</p>
        <p class="num" v-for="(list,index) in 1" :key="'total-' + index">
          <countTo :startVal="0" ref="countTos" :endVal="item.tKey" :duration="3000" separator="" :prefix="getNumberString(item.tKey)"> </countTo>
        </p>
        <span class="ren">人</span>
      </div>
      <ul class="data" v-for="(list,index) in 1" :key="'data-' + index">
        <li>
          <span class="blue">
            <countTo :startVal="0" ref="countTos" :endVal="item.mKey" :duration="3000"> </countTo>
          </span>
          <p>本月访客</p>
        </li>
        <li>
          <span class="oranange">
            <countTo :startVal="0" ref="countTos" :endVal="item.wKey" :duration="3000"> </countTo>
          </span>
          <p>本周访客</p>
        </li>
        <li>
          <span class="green">
            <countTo :startVal="0" ref="countTos" :endVal="item.dKey" :duration="3000"> </countTo>
          </span>
          <p>当日访客</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import countTo from 'vue-count-to' // 导入插件

export default {
  name:'contenBox',
  components: {
    countTo
  },
  props:{
    num:{
      type:Number,
      default: 1
    },
    item:{
      type:Object,
      default(){
        return {
          dKey: 0,
          mKey: 0,
          tKey: 0,
          wKey: 0,
          venueType: "",
        }
      }
    }
  },
  data() {
    return {
      remainingTime: 30, // 初始剩余时间为30秒
      countdownTimer: null,
    }
  },
  watch: {},
  computed: {
    // 动态计算图片路径
    imagePath() {
      return `/images/n_0${this.num}.png`;
    }
  },
  created() {},
  mounted() {
    // 初始化倒计时
    this.startCountdown()
  },
  beforeDestroy() {
    this.countdownTimer && clearInterval(this.countdownTimer);
  },
  methods:{
    // 距离刷新时间还有30秒的方法
    startCountdown() {
      this.remainingTime = 30; // 重置剩余时间为30秒
      this.countdownTimer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
          // 小于10以下 补0
          if (this.remainingTime < 10) {
            this.remainingTime = `0${this.remainingTime}`;
          }
        } else {
          clearInterval(this.countdownTimer);
          // 刷新数据
          this.init();
          this.startCountdown();
        }
      }, 1000);
    },
    init(){
      // 创建实例  循环调用 所有 dom
      const io = new IntersectionObserver((entries) => {
      // entries 实际上是dom
      // 将其转为数组，遍历
        Array.from(entries).forEach((item) => {
          if (item.intersectionRatio > 0.1) {
          // intersectionRatio 相交区域和目标元素的比例值 
          // intersectionRect/boundingClientRect 不可见时小于等于0
          // intersectionRatio和isIntersecting是用来判断元素是否可见的
            const countTos = this.$refs.countTos
          // 通过$refs获取实例，遍历调用实例方法start()  
            countTos.map((counto) => {
              counto.start()
            })
          }
        })
      })
      // 获取所有 countToWrapper 标签 开始观察
      const countToWrapper = document.getElementById('countToWrapper')
      io.observe(countToWrapper)
    }
  }
}
</script>
<style lang="scss" scoped>
.conten-box{
  position: relative;
  .img{
    position: absolute;
    width: 100%;
    height: 290px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .box{
    position: absolute;
    width: 100%;
    top: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .number{
      display: flex;
      height: 86px;
      p{
        margin: 0;
        padding: 0;
      }
      p:first-of-type{
        font-size: 25px;
        margin-top: 10px;
      }
      .num{
        margin: 0 16px;
        width: 240px;
        height: 54px;
        background: url('../../images/num.png') no-repeat;
        background-size: contain;
        > span{
          display: inline-block;
          font-size: 40px;
          letter-spacing: 18px;
          margin-left: 8px;
          margin-top: 2px;
        }
      }
      span.ren{
        margin-top: 30px;
        font-weight: bold;
      }
    }
    .data{
      display: flex;
      justify-content: center;
      width: 100%;
      li{
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p{
          margin-top: 10px;
          font-size: 18px;
        }
        span{
          font-size: 26px;
          &.blue{
            color: #59a5f5;
          }
          &.oranange{
            color: #c8ae47;
          }
          &.green{
            color: #26e23c;
          }
        }
      }
    }
  }
}

</style>